import { Button, Col, DatePicker, Form, Input, Row, Space } from 'antd';
import { useContext, useImperativeHandle } from 'react';
import { UserManageContext } from '../hooks';
import { IUserRightTableTitleView } from '../type';
import cls from 'classnames';
import { TypographyTitle } from '@/components/Typography';
import pageStyles from '@/common/pageLayout.less';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
import moment from 'moment';
import React from 'react';

const { RangePicker }: any = DatePicker;

export const UserRightTableTitleView = React.forwardRef(({}: IUserRightTableTitleView, ref) => {
  const { userFixCls, rightTablePagination, reloadRightTable, leftTreeType, userManDispatch } = useContext(UserManageContext);
  const [userSearchForm] = Form.useForm();

  // ref 逻辑处理
  useImperativeHandle(ref, () => ({
    reloadSearchForm: () => {
      //用于左侧树点击 通过ref 来达到清空右侧搜索表单输入框的值
      userSearchForm?.resetFields();
    },
  }));

  // 点击搜索
  const clickSearchBtn = () => {
    let formValue = userSearchForm?.getFieldsValue();
    let searchParams: Record<string, any> = {};
    if (formValue?.createTime) {
      let [timeStart, timeEnd] = formValue?.createTime;
      let createTimeStart = timeStart?.format('YYYY-MM-DD 00:00:00');
      let createTimeEnd = timeEnd?.format('YYYY-MM-DD 23:59:59');
      searchParams['createTimeStart'] = createTimeStart;
      searchParams['createTimeEnd'] = createTimeEnd;
    }
    if (formValue?.name) {
      searchParams['name'] = formValue?.name;
    }
    if (formValue?.realName) {
      searchParams['realName'] = formValue?.realName;
    }
    if (formValue?.phoneNum) {
      searchParams['phoneNum'] = formValue?.phoneNum;
    }
    if (formValue?.emailNum) {
      searchParams['emailNum'] = formValue?.emailNum;
    }

    // 保存一下表单的 输入的值, 达到分页器改变时候传参
    userManDispatch({
      type: 'user-searchFormValues',
      payload: searchParams,
    });

    let tableParams = {
      ...rightTablePagination,
      ...searchParams,
      ...leftTreeType,
    };

    reloadRightTable(tableParams); //调用获取用户接口
  };

  // 点击刷新
  const clickReloadBtn = () => {
    userSearchForm?.resetFields(); //清空表单输入框
    let tableParams = {
      ...rightTablePagination,
      ...leftTreeType,
      rows: 10,
      page: 1,
    };
    userManDispatch({
      //恢复分页器参数为默认
      type: 'user-rightTablePagination',
      payload: { ...rightTablePagination, rows: 10, page: 1 },
    });
    userManDispatch({
      //清空表单存入的参数
      type: 'user-searchFormValues',
      payload: {},
    });
    reloadRightTable(tableParams); //获取用户数据
  };

  return (
    <>
      {/* <Col span={24} className={cls(userFixCls + 'right-title-col')}> */}
      <div
      // className={userFixCls + 'col-div-box'}
      >
        <div className={userFixCls + 'tableRight-header'}>
          <TypographyTitle
            level={4}
            style={{
              margin: 0,
            }}
          >
            用户管理
          </TypographyTitle>
          <Space>
            <Button
              type={'primary'}
              icon={<SearchOutlined />}
              onClick={() => {
                clickSearchBtn();
              }}
              onMouseOut={(event: any) => {
                event?.target?.nodeName == 'BUTTON' ? event?.target?.blur() : event?.target?.parentNode?.blur();
              }}
            >
              搜索
            </Button>
            <Button
              icon={<ReloadOutlined />}
              onClick={() => {
                clickReloadBtn();
              }}
              onMouseOut={(event: any) => {
                event?.target?.nodeName == 'BUTTON' ? event?.target?.blur() : event?.target?.parentNode?.blur();
              }}
            >
              重置
            </Button>
          </Space>
        </div>
        <div className={cls(pageStyles['fromView-styles'], userFixCls + 'tableRight-header-formDiv')} style={{ padding: 0 }}>
          <Form layout="inline" form={userSearchForm}>
            <Row className={userFixCls + 'tableRight-searchRow'}>
              <Col span={4}>
                <Form.Item name={'name'} style={{ marginRight: '8px' }}>
                  <Input placeholder="登录名称" allowClear />
                </Form.Item>
              </Col>
              <Col span={4}>
                <Form.Item name={'realName'} style={{ marginRight: '8px' }}>
                  <Input placeholder="真实姓名" allowClear />
                </Form.Item>
              </Col>
              <Col span={4}>
                <Form.Item name={'phoneNum'} style={{ marginRight: '8px' }}>
                  <Input placeholder="用户电话" allowClear />
                </Form.Item>
              </Col>
              <Col span={4}>
                <Form.Item name={'emailNum'} style={{ marginRight: '8px' }}>
                  <Input placeholder="用户邮箱" allowClear />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item name={'createTime'} style={{ marginRight: 0 }}>
                  <RangePicker
                    style={{ width: '100%' }}
                    placeholder={['开始时间', '结束时间']}
                    ranges={{
                      今天: [moment(), moment()],
                      本周: [moment().startOf('week'), moment().endOf('week')],
                      本月: [moment().startOf('month'), moment().endOf('month')],
                      本年: [moment().startOf('year'), moment().endOf('year')],
                    }}
                    allowClear
                  />
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </div>
      </div>
      {/* </Col> */}
    </>
  );
});
